<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>马上兑换</title>
  <link rel="stylesheet" href="./static/css/swiper.min.css">
  <link rel="stylesheet" href="./static/css/reset.css">
  <link rel="stylesheet" href="./static/css/exchange_quan.css">
  <script src="./static/js/rem.js"></script>
</head>
<body>
  <!-- 商品 -->
  <div class="goods">
    <img class="goods-image" src="./static/img/default_avatar.png">
    <div class="goods-buy">
      <div class="goods-type">
        <span style="font-size:.36rem;color: #000">产品名称</span>
        <span>500G</span>
      </div>
      <div class="goods-price">
        <span>单价：</span>
        <span style="font-size:.36rem;color: #f71a60">A&nbsp;</span>
        <span>券</span>
        <span style="font-size:.20rem;">&nbsp;x2</span>
      </div>
      <div class="goods-count">
        <span>-</span>
        <span class="num">2</span>
        <span>+</span>
      </div>
      <div class="goods-total">总价：<span style="font-size:.32rem;color: #f71a60">2</span>&nbsp;张&nbsp;<span style="font-size:.32rem;color: #f71a60">A</span>&nbsp;券</div>
    </div>
  </div>
  
  <!-- 消费券 -->
  <div class="xiao-fei-quan">
    <div class="title">消费券</div>
    <div class="add">
      <input type="text" placeholder="请输入消费卷编码">
      <div class="btn-box">
        <i class="clean"></i>
        <span class="add-btn">添加</span>
      </div>
    </div>
    <!-- 已添加的消费卷 -->
    <div class="added-quan">
      <div class="added-quan-title">已添加消费券:</div>
      <ul class="added-quan-list">
        <li class="added-quan-info">
          <div class="added-quan-info-left">券</div>
          <div class="added-quan-info-center">
            <div class="quan-code">券码：E539D6S2DJU3</div>
            <div class="quan-type-box">
              <div class="quan-tyep">类型：A券</div>
              <div class="quan-date">有效期：2019.08.06 - 2019.12.06</div>
            </div>
          </div>
          <div class="added-quan-info-right active"></div>
        </li>
        <li class="added-quan-info">
          <div class="added-quan-info-left">券</div>
          <div class="added-quan-info-center">
            <div class="quan-code">券码：E539D6S2DJU3</div>
            <div class="quan-type-box">
              <div class="quan-tyep">类型：A券</div>
              <div class="quan-date">有效期：2019.08.06 - 2019.12.06</div>
            </div>
          </div>
          <div class="added-quan-info-right"></div>
        </li>
      </ul>
    </div>
    <!-- 我的消费券 -->
    <div class="my-quan">
      <div class="my-quan-title">我的消费券:</div>
      <ul class="my-quan-list">
        <li class="my-quan-info">
          <div class="my-quan-info-left">券</div>
          <div class="my-quan-info-center">
            <div class="quan-code">券码：E539D6S2DJU3</div>
            <div class="quan-type-box">
              <div class="quan-tyep">类型：A券</div>
              <div class="quan-date">有效期：2019.08.06 - 2019.12.06</div>
            </div>
          </div>
          <div class="my-quan-info-right"></div>
        </li>
      </ul>
    </div>
  </div>

  <!-- 联系方式 -->
  <div class="contact">
    <div class="contac-type">联系方式</div>
    <div class="contac-icon">
      <div>
        从个人信息导入
      </div>
    </div>
  </div>

  <!-- 联系方式表单区域 -->
  <form action="" class="contact-from">
    <div class="fist-row">
      <div class="name">
        <input class="name-input" type="text" placeholder="姓名" name="name">
        <span>*</span>
      </div>
      <div class="phone">
        <input class="phone-input" type="text" placeholder="手机" name="phone">
        <span>*</span>
      </div>
    </div>
    <div class="second-row">
      <div class="qq">
        <input class="qq-input" type="text" placeholder="QQ" name="qq">
      </div>
      <div class="weixin">
        <input class="weixin-input" type="text" placeholder="微信" name="weixin">
      </div>
    </div>
    <div class="address-box">
      <textarea class="address" placeholder="地址" style="resize:none"></textarea>
      <span>*</span>
    </div>
    <p class="prompt">
      请认真填写联系方式，以方便我们联系您。
    </p>
    <input class="submit active" type="submit" value="提交订单"/>
  </form>
</body>
</html>